<!DOCTYPE HTML>
<html lang="en-US">
    <head>

        <meta charset="UTF-8">
        <title>Beoro Admin Template v1.1</title>
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <link rel="icon" type="image/ico" href="favicon.ico">
        
    <!-- common stylesheets-->
        <!-- bootstrap framework css -->
            <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
            <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css">
        <!-- iconSweet2 icon pack (16x16) -->
            <link rel="stylesheet" href="img/icsw2_16/icsw2_16.css">
        <!-- splashy icon pack -->
            <link rel="stylesheet" href="img/splashy/splashy.css">
        <!-- flag icons -->
            <link rel="stylesheet" href="img/flags/flags.css">
        <!-- power tooltips -->
            <link rel="stylesheet" href="js/lib/powertip/jquery.powertip.css">
        <!-- google web fonts -->
            
            

    <!-- aditional stylesheets -->
        <!-- datatables -->
            <link rel="stylesheet" href="js/lib/datatables/css/datatables_beoro.css">
            <link rel="stylesheet" href="js/lib/datatables/extras/TableTools/media/css/TableTools.css">


        <!-- main stylesheet -->
            <link rel="stylesheet" href="css/beoro.css">
        <!-- datepicker -->
            <link rel="stylesheet" href="js/lib/bootstrap-datepicker/css/datepicker.css">

        <!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css"><![endif]-->
        <!--[if IE 9]><link rel="stylesheet" href="css/ie9.css"><![endif]-->
            
        <!--[if lt IE 9]>
            <script src="js/ie/html5shiv.min.js"></script>
            <script src="js/ie/respond.min.js"></script>
            <script src="js/lib/flot-charts/excanvas.min.js"></script>
        <![endif]-->

    </head>
    <body class="bg_d">
    <!-- main wrapper (without footer) -->    
        <div class="main-wrapper">
        <!-- top bar -->
            <div class="container">
                <div class="w-box" id="n_datepicker">
                    <div class="w-box-content cnt_a">
                        <div class="row-fluid">
                            <div class="span4">
                                <label>Начало диапазона</label>
                                <div class="input-append date" id="dpStart" data-date-format="yyyy-mm-dd">
                                    <input class="span6" size="16" value="" readonly type="text">
                                    <span class="add-on"><i class="icon-calendar"></i></span>
                                </div>
                            </div>
                            <div class="span4">
                                <label>Конец диапазона</label>
                                <div class="input-append date" id="dpEnd" data-date-format="yyyy-mm-dd">
                                    <input class="span6" size="16" value="" readonly type="text">
                                    <span class="add-on"><i class="icon-calendar"></i></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">
                    <div class="w-box w-box-green">
                            <div class="w-box-header">
                                <h4>Детализация</h4>
                            </div>
                            <div class="w-box-content">
                                <table id="dt_table_tools2" class="table table-striped table-condensed">
                                <thead></thead>                                
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer_space"></div>
        </div> 

    <!-- footer --> 
        
        
    <!-- Common JS -->
        <!-- jQuery framework -->
            <script src="js/jquery.min.js"></script>
        <!-- bootstrap Framework plugins -->
            <script src="bootstrap/js/bootstrap.min.js"></script>
        <!-- top menu -->
            <script src="js/jquery.fademenu.js"></script>
        <!-- top mobile menu -->
            <script src="js/selectnav.min.js"></script>
        <!-- actual width/height of hidden DOM elements -->
            <script src="js/jquery.actual.min.js"></script>
        <!-- jquery easing animations -->
            <script src="js/jquery.easing.1.3.min.js"></script>
        <!-- power tooltips -->
            <script src="js/lib/powertip/jquery.powertip-1.1.0.min.js"></script>
        <!-- date library -->
            <script src="js/moment.min.js"></script>
        <!-- common functions -->
            <script src="js/beoro_common.js"></script>

        <!-- datatables -->
            <script src="js/lib/datatables/js/jquery.dataTables.min.js"></script>
        <!-- datatables column reorder -->
            <script src="js/lib/datatables/extras/ColReorder/media/js/ColReorder.min.js"></script>
        <!-- datatables column toggle visibility -->
            <script src="js/lib/datatables/extras/ColVis/media/js/ColVis.min.js"></script>
        <!-- datatable table tools -->
            <script src="js/lib/datatables/extras/TableTools/media/js/TableTools.min.js"></script>
            <script src="js/lib/datatables/extras/TableTools/media/js/ZeroClipboard.js"></script>
        <!-- datatables bootstrap integration -->
            <script src="js/lib/datatables/js/jquery.dataTables.bootstrap.min.js"></script>
        
        <!-- datepicker -->
            <script src="js/lib/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
            <script src="js/lib/date/date.format.js"></script>

            <script src="js/pages/beoro_datatables.js"></script>
            
            
<script type="text/javascript">
<!--
$(document).ready(function() {
    if (($('#dpStart').length) && ($('#dpEnd').length)) {            
            
            var d1 = new Date();
            d1.setDate(d1.getDate() - 7);
            d1 = dateFormat(d1, 'yyyy-mm-dd');
            $('#dpStart').data('date', d1);
            $('#dpStart input').val(d1);
            var startDate=d1;                        
            

            var d2 = new Date();
            d2.setDate(d2.getDate());
            d2 = dateFormat(d2, 'yyyy-mm-dd');
            $('#dpEnd').data('date', d2);
            $('#dpEnd input').val(d2);
            var endDate=d2;
            start_find(startDate, endDate);            
            
            $('#dpStart').datepicker().on('changeDate', function (ev) {
                var dateText = $(this).data('date'),
                    endDateTextBox = $('#dpEnd input');
                if (endDateTextBox.val() != '') {
                    var testStartDate = new Date(dateText),
                        testEndDate = new Date(endDateTextBox.val());
                    if (testStartDate > testEndDate) {
                        endDateTextBox.val(dateText);
                    }
                } else {
                    endDateTextBox.text(dateText);
                }
                ;
                $('#dpEnd').datepicker('setStartDate', dateText);
                $('#dpStart').datepicker('hide');
                var startDate = dateText;
                var endDate = endDateTextBox.val();                
                start_find(startDate, endDate);
            });
            $('#dpEnd').datepicker().on('changeDate', function (ev) {
                var dateText = $(this).data('date'),
                    startDateTextBox = $('#dpStart input');
                if (startDateTextBox.val() != '') {
                    var testStartDate = new Date(startDateTextBox.val()),
                        testEndDate = new Date(dateText);
                    if (testStartDate > testEndDate) {
                        startDateTextBox.text(dateText);
                    }
                } else {
                    startDateTextBox.val(dateText);
                }
                ;
                $('#dpStart').datepicker('setEndDate', dateText);
                $('#dpEnd').datepicker('hide');
                var startDate = startDateTextBox.val();
                var endDate = dateText;                
                start_find(startDate, endDate);                
            });
        }
    
    $('.dataTables_filter input').each(function() {
        $(this).attr("placeholder", "Быстрый поиск");            
    });
});

function start_find(startDate, endDate) {
    if($('#dt_table_tools2').length) {
        $('#dt_table_tools2').dataTable({
            "aoColumns": [
    						{ "sTitle": "№" },
                            { "sTitle": "Дата продажи"},
    						{ "sTitle": "Дата активации"},
    						{ "sTitle": "Дата запроса"},
    						{ "sTitle": "Сумма пополнений", "sClass": "center" },
    						{ "sTitle": "Тип пополнения", "sClass": "center" },
                            { "sTitle": "Номер телефона", "sClass": "center"},
                            { "sTitle": "ICCID", "sClass": "center"},
                            { "sTitle": "Число исходящих звонков", "sClass": "center"},
                            { "sTitle": "Число исходящих мин", "sClass": "center"},
                            { "sTitle": "Число входящих мин", "sClass": "center"},
    					],        
            
            "sServerMethod": "POST",        
            "sScrollX": "100%",
            "sScrollXInner": '150%',
            "bScrollCollapse": true,
            "oLanguage": {"sProcessing": "Подождите..."},        
            "sPaginationType": "bootstrap",
            "bDestroy": true,
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "../ajax/detail.php",            
            
            "fnServerParams": function (aoData) {
                aoData.push({
                    "name": "startDate",
                    "value": startDate
                })
                aoData.push({
                    "name": "endDate",
                    "value": endDate
                })     
            },
            
            
            "sDom": "R<'dt-top-row'CTlf>r<'dt-wrapper't><'dt-row dt-bottom-row'<'row-fluid'ip>",
            "oTableTools": {
                "aButtons": [
                    "copy",
                    "print",
                    {
                        "sExtends":    "collection",
                        "sButtonText": 'Save <span class="caret" />',
                        "aButtons":    [ "csv", "xls", "pdf" ]
                    }
                ],
                "sSwfPath": "js/lib/datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
            },
            "fnInitComplete": function(oSettings, json) {
                $(this).closest('#dt_table_tools2_wrapper').find('.DTTT.btn-group').addClass('table_tools_group').children('a.btn').each(function(){
                    $(this).addClass('btn-mini btn-inverse');
                });
                $('.ColVis_Button').addClass('btn btn-mini btn-inverse').html('Показать/спрятать колонки');
                $('.DTTT_button_copy span').html('Копировать');
                $('.DTTT_button_print span').html('Печать');
                //$('.DTTT_button_collection span').html('Сохранить');                        
                $('.ColVis').css('right', 450);            
            }
        });
    }
}
-->
</script>
    </body>
</html>